import { INJECT_GROUP_CLASS_NAME } from '@/common/const-inject-class'
import { COMMON_ITEM_TYPE_MAP, LIST_TYPE_MAP } from '@/common/const-items'
import { COMPONENT_TYPES, PAGE_TYPE, PAGE_TYPE_ } from '@/common/const'
import { getPxOVwByValue, dealPosition, pageAdaptive, dealCompatibilityData } from '@/store/utils'
import { isJSON, getCompIdByParam, isHasOwnProperty } from '@/plugins/utils'
import { H5_TYPE, MOBILE_WID_HEI, PC_WID_HEI, CANVAS_WID_HEI } from '@/common/const-dif'
import { searchComponentDataById } from '@/store/index-utils'
import { getMainListEventByEvents } from '@/store/utils'
import { EVENT_HOVER_TYPES, STATISTIC_DATA_TYPES_MAP } from '@/common/events'
import { SCROLL_TRIGGER_TYPE_MAP } from '@/common/const-animates'
import { CAROUSEL_ITEM_TYPES_MAP } from '@/common/const-items'
import store from '@/store'

export function dealSiteType(siteData){
  let pages = _.filter(siteData.pages, function(o) { return o.type == PAGE_TYPE_.page })
  let h5Type = siteData.attrs.h5Type
  let page = pages[0]
  if(h5Type == H5_TYPE.mobile){
    MOBILE_WID_HEI.width = page.attrs.width;
    _.merge(MOBILE_WID_HEI, MOBILE_WID_HEI)
  }else if(h5Type == H5_TYPE.pc){
    PC_WID_HEI.width = page.attrs.width;
    _.merge(MOBILE_WID_HEI, PC_WID_HEI)
  }else if(h5Type == H5_TYPE.canvas){
    CANVAS_WID_HEI.width = page.attrs.width;
    _.merge(MOBILE_WID_HEI, CANVAS_WID_HEI)
    siteData.attrs.width = MOBILE_WID_HEI.clientWidth
    siteData.attrs.height = MOBILE_WID_HEI.clientHeight
    siteData.styles.width = page.attrs.width + "px"
    siteData.styles.height = page.attrs.height + "px"
  }
}

export function dealPageStyleAndAttr(siteAttrs, page){
  let hei = page.attrs.height
  page.styles = {}
  page.styles.width = getPxOVwByValue(page.attrs.width)
  page.styles.height = getPxOVwByValue(hei)
  if(siteAttrs.h5Type == H5_TYPE.canvas){
    page.attrs.width = MOBILE_WID_HEI.clientWidth
    page.attrs.height = MOBILE_WID_HEI.clientHeight
    page.styles.width = page.attrs.width + "px"
    page.styles.height = page.attrs.height + "px"
  }
  if((siteAttrs.pageType == PAGE_TYPE.single || hei/MOBILE_WID_HEI.adaptiveScale <= MOBILE_WID_HEI.clientHeight)){
    page.attrs.width = parseInt(MOBILE_WID_HEI.clientWidth*MOBILE_WID_HEI.adaptiveScale)
    page.styles.width = getPxOVwByValue(page.attrs.width)
    let reallyHeight = parseInt(MOBILE_WID_HEI.clientHeight*MOBILE_WID_HEI.adaptiveScale)
    if(MOBILE_WID_HEI.adaptiveScale <= 1 && !store.state.siteInfo.md.isMobile) {
      reallyHeight = MOBILE_WID_HEI.clientHeight
      if(reallyHeight < page.attrs.height) {
        reallyHeight = page.attrs.height
      }
    }
    page.attrs.height = reallyHeight
    page.styles.height = getPxOVwByValue(reallyHeight)
  }
}

export function setCompnentDataIsVisible(searchIdStr, componentMap){
  let searchId = getCompIdByParam(searchIdStr);
  let searcComponentData = componentMap[searchId];
  if(searcComponentData){
    searcComponentData.commonAttr.isVisible = false;
  }
}

export function dealPageOrGroup(state, siteData, pageOrGroupComponent, currentPage, isInGroup, pages){
  //页面是全屏切滚动触发fixed
  let isGroupFullScreen = false;
  for(let j = 0, len = pageOrGroupComponent.components.length; j < len; j++){
    let componentData = pageOrGroupComponent.components[j];
    componentData.isInGroup = isInGroup;
    if(isInGroup){
      componentData.groupCompId = pageOrGroupComponent.id;
    }
    if(componentData.cid == COMPONENT_TYPES.group_carousel) {
      if(!isHasOwnProperty(componentData, "events")) {
        componentData.events = {}
      }
    }
    //打组组件
    if(componentData.components && componentData.components.length > 0){
      dealPageOrGroup(state, siteData, componentData, currentPage, true, pages);

      compOperateInGroup(state, componentData, currentPage);
      scrollContainerInGroup(componentData);

      if(!isInGroup && componentData.commonAttr.isFullScreen && componentData.commonAttr.isScrollTriggerGsap){
        isGroupFullScreen = true
      }
      dealInjectJsClass(componentData, state);
      if(componentData.cid == COMPONENT_TYPES.group_carousel){
        if(componentData.commonAttr.listType !== LIST_TYPE_MAP.rotate) {
          let isRelative = false
          if(componentData.commonAttr.listType == LIST_TYPE_MAP.relative) {
            isRelative = true
            currentPage.isAdjustPageHeight= true
          }
          addGroupCarouselList(componentData, state.componentMap, isRelative)
        }
      } else if(componentData.cid == COMPONENT_TYPES.group_component && componentData.commonAttr.injectJsClass == INJECT_GROUP_CLASS_NAME.ClickGetNumberAnim) {
        addAnimComps(componentData, state.componentMap)
        componentData.conStyles.overflow = "hidden"
      }
    }
    dealComponentData(state, siteData, componentData, currentPage, pages, j);
  }
  if(isGroupFullScreen){
    let groupFullScreenComps = [];
    let otherComps = [];
    _.forEach(pageOrGroupComponent.components, (compData) => {
      if(compData.cid == COMPONENT_TYPES.group_component && compData.commonAttr.isFullScreen){
        groupFullScreenComps.push(compData);
      }else{
        otherComps.push(compData);
      }
    })
    groupFullScreenComps = _.sortBy(groupFullScreenComps, (comp) => { return comp.commonAttr.pageIndex; });
    pageOrGroupComponent.components = _.concat(groupFullScreenComps, otherComps);
    pageOrGroupComponent.styles.height = (groupFullScreenComps.length+2) * MOBILE_WID_HEI.clientHeight + 'px';
  }

  // dealControls(siteData.controls);
}

function dealInjectJsClass(componentData, state) {
  if(componentData.commonAttr.injectJsClass){
    _.forEach(componentData.components, (compData) => {
      compData.commonAttr.groupInjectClassName = componentData.commonAttr.injectJsClass;
    })
    if(componentData.commonAttr.injectJsClassParams && isJSON(componentData.commonAttr.injectJsClassParams)){
      if(!componentData.interactionData){
        componentData.interactionData = {};
      }
      let injectJsClassObj = JSON.parse(componentData.commonAttr.injectJsClassParams);
      componentData.interactionData.injectJsClassObj = injectJsClassObj
      if(injectJsClassObj.pixi) {
        state.isLoadJsObj.isPixi = true
        let pixiObj = injectJsClassObj.pixi;
        if(pixiObj.filters) {
          state.isLoadJsObj.isPixiFilters = true
        }
        if(injectJsClassObj.gsap) {
          state.isLoadJsObj.isGsap = true
        }
      }else if(injectJsClassObj.gsap) {
        state.isLoadJsObj.isGsap = true
        if(injectJsClassObj.gsap.isBezier){
          state.isLoadJsObj.isGsapBezier = true
        }
      } else if(injectJsClassObj.matter) {
        state.isLoadJsObj.isMatter = true
      } else if(injectJsClassObj.three) {
        let threeObj = injectJsClassObj.three;
        if(threeObj.orbit) {
          state.isLoadJsObj.isOrbitControls = true
        }
        if(threeObj.gltf) {
          state.isLoadJsObj.isGltfLoader = true
        }
      }else if(injectJsClassObj.turn) {
        state.isLoadJsObj.isTurnBook = true
      }
    }
  }
}

function addAnimComps(componentData, componentMap) {
  let comps = [];
  let copyItem = null;
  let copyItem_ = null;
  _.forEach(componentData.components, (componentData) => {
    copyItem = _.cloneDeep(componentData);
    copyItem.conStyles.top = getPxOVwByValue(componentData.conAttr.top - componentData.conAttr.height * 2);
    copyItem.id = componentData.id + "-" + componentData.commonAttr.itemIndex + "-0";
    comps.push(copyItem);
    componentMap[copyItem.id] = copyItem;
    copyItem_ = _.cloneDeep(copyItem);
    copyItem_.id = componentData.id + "-" + componentData.commonAttr.itemIndex + "-1";
    comps.push(copyItem_);
    componentMap[copyItem_.id] = copyItem_;
    copyItem_ = _.cloneDeep(copyItem);
    copyItem_.id = componentData.id + "-" + componentData.commonAttr.itemIndex + "-2";
    comps.push(copyItem_);
    componentMap[copyItem_.id] = copyItem_;
  })
  componentData.components = _.concat(componentData.components, comps)
}

function addGroupCarouselList(componentData, componentMap, isRelative){
  _.forEach(componentData.components, (compData, i) => {
    compData.commonAttr.qIndex = i;
  })
  let itemList = [];
  let copyItem = null;
  const relateAttrCompId = getCompIdByParam(componentData.commonAttr.relateAttrCompId);
  let relateLists = null;
  if(relateAttrCompId){
    const relateCompData = componentMap[relateAttrCompId];
    if(relateCompData.events.interactionData) {
      relateLists = relateCompData.interactionData.lists
    }else if(relateCompData.lists && relateCompData.lists.length > 0){
      relateLists = relateCompData.lists;
    }else {
      let mainEvent = getMainListEventByEvents(relateCompData.events)
      relateLists = store.state.controls[relateAttrCompId][mainEvent.controlId].data.elements
    }
  }
  if(isRelative) {
    _.sortBy(componentData.components, (comp) => { return comp.conAttr.top; });
   _.forEach(componentData.components, (comp, index) => {
    if(index > 0) {
      const prevComp = componentData.components[index - 1]
      comp.conAttr.top = comp.conAttr.top - prevComp.conAttr.height - prevComp.conAttr.top
      comp.conStyles.top = '0'
    }
    comp.conStyles.top = '0'
    comp.conStyles.marginTop = getPxOVwByValue(comp.conAttr.top)
    // componentData.conAttr.oldHeight = componentData.conAttr.height
    // componentData.conAttr.height = 0
    componentData.conStyles.height_ = 'auto'
   })
  }
  if(relateLists) {
    _.forEach(relateLists, (item, index) => {
      copyItem = _.cloneDeep(componentData);
      copyItem.cid = COMPONENT_TYPES.group_component;
      copyItem.id = componentData.id + "_" + index;
      copyItem.commonAttr.itemIndex = index;
      componentMap[copyItem.id] = copyItem;

      _.forEach(copyItem.components, (compData, i) => {
        compData.id = compData.id + "_" + index + "_" + i;
        if(isRelative) {
          compData.conStyles.position = 'relative'
        }
        compData.commonAttr.qIndex = i;
        compData.commonAttr.itemIndex = index;
        componentMap[compData.id] = compData;
        compData.isInGroupCarousel = true;
        compData.groupCompId = componentData.id
        if(compData.components && compData.components.length > 0) {
          compData.cid = COMPONENT_TYPES.group_component;
          _.forEach(compData.components, (compData_) => {
            compData_.id = compData_.id + "_" + index + "_" + i;
            compData_.commonAttr.qIndex = i;
            compData_.commonAttr.itemIndex = index;
            componentMap[compData_.id] = compData_;
            compData_.isInGroupCarousel = true;
            compData_.groupCompId = componentData.id
          })
        }
      })
      copyItem.commonAttr.itemIndex = index;
      itemList.push(copyItem);
    });
    componentData.components = itemList
  }
}

export function dealComponentData(state, siteData, componentData, currentPage){
  state.componentMap[componentData.id] = componentData;
  //设置全局组件关联事件共享池
  const relateEventCompId = getCompIdByParam(componentData.commonAttr.relateEventCompId);
  if(relateEventCompId){
    const componentDataInPage = searchComponentDataById(relateEventCompId, currentPage);
    if(!componentDataInPage){
      const searchCompData = state.componentMap[relateEventCompId];
      if(!state.isGlobalShareComponents[currentPage.id]){
        state.isGlobalShareComponents[currentPage.id] = { components: [searchCompData] };
      }else{
        state.isGlobalShareComponents[currentPage.id].components.push(searchCompData);
      }
    }
  }
  if(_.isArray(componentData.events)){
    componentData.events = {}
  }
  //组件事件处理
  _.forEach(componentData.events, (event) => {
    if(event.mouseBehavior == "load") {
      currentPage.isReloadEvent = true;
    }
    if(event.type == EVENT_HOVER_TYPES.shake.type){
      state.isLoadJsObj.isShake = true
    }else if(event.type == EVENT_HOVER_TYPES.follow.type){
      state.globalIsPost.followCompIds.push(componentData.id)
    }else if(event.type == EVENT_HOVER_TYPES.saveImg.type){
      state.isLoadJsObj.isHtml2canvas = true
      let isUploadImgToServer = event.comps[2].attrs.isUploadImgToServer
      if(isUploadImgToServer) {
        state.isLoadJsObj.isNeedUploadParams = true
      }
    }else if(event.type == EVENT_HOVER_TYPES.scanQRCode.type){
      state.isLoadJsObj.isScanQRCode = true
    }else if(event.type == EVENT_HOVER_TYPES.interactionData.type){
      const customObjStr = event.comps[0].attrs.value;
      if(customObjStr && isJSON(customObjStr)){
        let customObj = JSON.parse(customObjStr);
        if(!componentData.interactionData) {
          componentData.interactionData = {};
        } else {
          _.merge(componentData.interactionData, customObj);
        }
        if(isHasOwnProperty(customObj, 'card') || isHasOwnProperty(customObj, 'puzzle') || isHasOwnProperty(customObj, 'isEmitClick')){
          if(isHasOwnProperty(customObj, 'card')) {
            componentData.interactionData.cardMap = customObj;//{"card":{"1":0,"2":0,"3":0,"4":0,"5":0},"btnCompId":"cf6dde53-308c-4b3d-8d83-0a9fa6e412f5"}
            state.interactionData.card = customObj.card;
          } else if(isHasOwnProperty(customObj, 'puzzle')) {
            componentData.interactionData.puzzleMap = customObj;//{"puzzle":{"row":6,"col":4},"matchLength":5}
            let puzzleObj = customObj.puzzle;
            let row = puzzleObj.row;
            let col = puzzleObj.col;
            let puzzle = _.fill(Array(row*col), 0);
            state.interactionData.puzzle = puzzle;
          }else if(isHasOwnProperty(customObj, 'isEmitClick')){
            componentData.interactionData.isEmitClick = customObj.isEmitClick;//{"isEmitClick":true}
            state.interactionData.isEmitClick = customObj.isEmitClick;
          }
        }
      }
    }else if(event.type == EVENT_HOVER_TYPES.statisticData.type){
      const statisticDataType = event.comps[0].attrs.value;
      if(statisticDataType == STATISTIC_DATA_TYPES_MAP.aes){
        state.isLoadJsObj.isJsBarcode = true
        const relateCompIdStr = event.comps[2].attrs.value;
        if(relateCompIdStr){
          const relateDatas = JSON.parse(relateCompIdStr);
          _.forEach(relateDatas, (relateData) => {
            if(relateData.relateCompId){
              const relateCompData = state.componentMap[relateData.relateCompId];
              relateCompData.commonAttr.imgId = "img_" + _.random(0, 10000);
            }
          })
        }
      }
    }
  })
  //初始化隐藏组件数据visibleComponents
  if(!componentData.commonAttr.isVisible){
    state.visibleComponents[componentData.id] = componentData.id
  }
  //属性兼容性处理
  dealCompatibilityData(componentData)

  setStateValueByCid(state, siteData, componentData, currentPage)

  dealInjectJsClass(componentData, state);

  //自适应单位处理
  if(siteData.attrs.h5Type == H5_TYPE.mobile){
    pageAdaptive(componentData, siteData.attrs.pageType)
  }
  //全屏组件高度调整
  let reallyHeight = parseInt(MOBILE_WID_HEI.clientHeight*MOBILE_WID_HEI.adaptiveScale)
  if(MOBILE_WID_HEI.adaptiveScale <= 1 && !store.state.siteInfo.md.isMobile){
    reallyHeight = MOBILE_WID_HEI.clientHeight
    if(reallyHeight < currentPage.attrs.height) {
      reallyHeight = currentPage.attrs.height
    }
  }
  if(componentData.commonAttr.isFullScreen) {
    // componentData.conAttr.width = parseInt(MOBILE_WID_HEI.clientWidth*MOBILE_WID_HEI.adaptiveScale)
    componentData.conAttr.height = reallyHeight
    componentData.conStyles.width = getPxOVwByValue(componentData.conAttr.width)
    componentData.conStyles.height = getPxOVwByValue(componentData.conAttr.height)

    if(siteData.attrs.pageType == PAGE_TYPE.single){
      componentData.conStyles.top = 0
    }else{
      const pageIndex = parseInt(componentData.commonAttr.pageIndex)
      componentData.conStyles.top = getPxOVwByValue(reallyHeight * pageIndex)

      const scrollPageHeight = reallyHeight * (pageIndex+1)
      if(scrollPageHeight > currentPage.attrs.height){
        currentPage.attrs.height = scrollPageHeight
        currentPage.styles.height = getPxOVwByValue(currentPage.attrs.height)
      }
    }
    // componentData.conStyles.left = 0

    if(componentData.cid == COMPONENT_TYPES.group_component){
      componentData.conStyles.position = "relative"
      delete componentData.conStyles.top
      delete componentData.conStyles.bottom
      delete componentData.conStyles.left
      delete componentData.conStyles.right
    }
  }
  //通用属性中位置处理
  dealPosition(componentData, state.fixedComps, currentPage.attrs)
  //设置播放所有动画
  if(componentData.animate && componentData.animate.animates && componentData.animate.animates.length > 0){
    componentData.animate.isPlayAll = true
    currentPage.attrs.playAnimateAllNum++;
  }
  if(componentData.animate && componentData.animate.isGsap){
    state.animates.isGsap[currentPage.id] = true;
    componentData.commonAttr.isPlayGsap = true;
    if(componentData.animate.path.isPathBezier){
      state.animates.isPathBezier[currentPage.id] = true;
    }
  }

  if(componentData.conStyles.height_ === 'auto') {
    componentData.conStyles.height = 'auto'
  }
}
function scrollContainerInGroup(componentData){
  let components = componentData.components;
  let len = components.length;
  let componentData_;
  for(let i = 0; i < len; i++){
    componentData_ = components[i];
    if(componentData_.cid == COMPONENT_TYPES.wb_scroll_container){
      if(componentData.conAttr.left > MOBILE_WID_HEI.width || componentData.conAttr.left < -MOBILE_WID_HEI.width){
        componentData_.commonAttr.groupCompId = componentData.id;
        break;
      }
    }
  }
}
//对打组组件中各种组件类型分类处理，比如打组组件集合类型radios，那么就组成一个单选组，
function compOperateInGroup(state, componentData, currentPage){
  //设置fixed打组组件中包含wb_menu组件的fixed属性
  if(componentData.commonAttr.isPageFixed){
    dealGlobalMenuFixed(componentData);
  }

  //打组组件中的组件随机动画
  if(componentData.commonAttr.isGroupGsap || componentData.commonAttr.isGroupAnimate){
    componentData.commonAttr.isPlayGsap = true;
    dealGroupAnimate(componentData);
  }
  //长页滚动触发动画
  dealGroupScrollTriggerAnimate(state, componentData, currentPage);
}
//有些组件需要提前加载素材，在这里设置一些在渲染页面中需要的值，方便在页面中使用
function setStateValueByCid(state, siteData, componentData, currentPage){
  if(componentData.animate && componentData.animate.animates.length > 0){
    state.isLoadJsObj.isAnimate = true
  }
  if(componentData.commonAttr.customFontStyle || componentData.commonAttr.isCustomFont) {
    state.isLoadJsObj.isCustomFont = true
  }
  if(componentData.commonAttr.spriteSheetParams && isJSON(componentData.commonAttr.spriteSheetParams)){
    if(!componentData.interactionData) {
      componentData.interactionData = {};
    }
    componentData.interactionData.spriteSheetObj = JSON.parse(componentData.commonAttr.spriteSheetParams);
  }
  let cid = componentData.cid
  if(cid == COMPONENT_TYPES.wb_text){
    if(componentData.commonAttr.isSplitGsap){
      state.isLoadJsObj.isGsap = true
      state.animates.isSplitGsap[currentPage.id] = true
    }
    if(componentData.commonAttr.isEdit){
      currentPage.isForm = true
    }
    if(componentData.commonAttr.isDisplayY){
      currentPage.isDisplayTextScroller = true
    }
    if(componentData.styles && componentData.styles.fontFamily != "默认字体"){
      state.isLoadJsObj.isDefaultFont = true
    }
  }else if(cid == COMPONENT_TYPES.wb_common_list){
    if(componentData.commonAttr.itemType == COMMON_ITEM_TYPE_MAP.checkbox){
      state.isForm.isCheckbox[currentPage.id] = true
    }
    if(componentData.commonAttr.isAutoY){
      state.frontData.pageCommonListAutoHeight[currentPage.id] = true
    }
  }else if(cid == COMPONENT_TYPES.wb_menu){
    if(componentData.lists[0].eventType == 'compVisibleInComps'){
      _.forEach(componentData.lists, (item_) => {
        let compId = getCompIdByParam(item_.value) || item_.value;
        state.visibleComponents[compId] = compId;
      })
    }
  }else if( cid == COMPONENT_TYPES.group_carousel){
    if(componentData.commonAttr.listType != (LIST_TYPE_MAP.commonList || LIST_TYPE_MAP.rotate)){
      state.isLoadJsObj.isSwiper = true
    }
  }else if(cid == COMPONENT_TYPES.wb_video){
    state.isLoadJsObj.isVideo = true
  }else if(cid == COMPONENT_TYPES.wb_videos){
    state.isLoadJsObj.isVideo = true
    state.isLoadJsObj.isSwiper = true
  }else if(cid == COMPONENT_TYPES.wb_imgs){
    state.isLoadJsObj.isSwiper = true
  }else if(cid == COMPONENT_TYPES.wb_carousel){
    state.isLoadJsObj.isSwiper = true
    if(componentData.commonAttr.itemType == CAROUSEL_ITEM_TYPES_MAP.jewelleryVideo){
      state.isLoadJsObj.isVideo = true
    }else if(componentData.commonAttr.itemType == CAROUSEL_ITEM_TYPES_MAP.different){
      state.isLoadJsObj.isAnimate = true
    }
  }else if(cid == COMPONENT_TYPES.wb_scroll_container){
    state.isLoadJsObj.isSwiper = true
  }else if(cid == COMPONENT_TYPES.group_component){
    if(componentData.commonAttr.isGroupGsap || componentData.commonAttr.isGroupAnimate){
      state.animates.isGroupGsap[currentPage.id] = true;
    }else if(componentData.commonAttr.isScrollTriggerGsap || componentData.commonAttr.isScrollTriggerAnimate){
      state.animates.isScrollTriggerGsap[currentPage.id] = true;
    }
  }else if(cid == COMPONENT_TYPES.wb_checkbox){
    state.isForm.isCheckbox[currentPage.id] = true
    currentPage.isForm = true
  }else if(cid == COMPONENT_TYPES.wb_radio){
    state.isForm.isRadio[currentPage.id] = true
    currentPage.isForm = true
  }else if(cid == COMPONENT_TYPES.wb_dropdown){
    state.isForm.isDropdown[currentPage.id] = true
    currentPage.isForm = true
  }else if(cid == COMPONENT_TYPES.wb_address){
    state.isForm.isAddress[currentPage.id] = true
    currentPage.isForm = true
  }else if(cid == COMPONENT_TYPES.wb_input && (componentData.commonAttr.isAuto || componentData.commonAttr.dataKey)){
    state.userInfo.isWbUserData = true
    currentPage.isForm = true
  }else if(cid == COMPONENT_TYPES.wb_is_post_event){
    // state.globalIsPost['isFollow'] = true
    if(componentData.events.follow){
      state.globalIsPost.followCompIds.push(componentData.id)
    }
    state.globalIsPost[componentData.commonAttr.interfaceType] = true
  }else if(cid == COMPONENT_TYPES.wb_process){
    if(componentData.commonAttr.isLoadAssets){
      state.isLoadJsObj.isLoadAssets = true
    }
  }else if(cid == COMPONENT_TYPES.wb_mc || cid == COMPONENT_TYPES.wb_bitmap_text){
    if(componentData.commonAttr.isCreatejs){
      state.isLoadJsObj.isCreatejs = true
    }else{
      state.isLoadJsObj.isEaseljs = true
    }
  }else if(cid == COMPONENT_TYPES.wb_pixis){
    state.isLoadJsObj.isPixi = true
  }else if(cid == COMPONENT_TYPES.wb_phasers){
    state.isLoadJsObj.isPhaser = true
  }else if(cid == COMPONENT_TYPES.wb_threes || cid == COMPONENT_TYPES.wb_panorama){
    state.isLoadJsObj.isThree = true
  }else if(cid == COMPONENT_TYPES.wb_moveable || (cid == COMPONENT_TYPES.wb_camera && componentData.commonAttr.isPoster)){
    state.isLoadJsObj.isMoveable = true
  }else if(cid == COMPONENT_TYPES.wb_svg_icon){
    if(componentData.commonAttr.isSvga) {
      state.isLoadJsObj.isSvga = true
    }else{
      state.isLoadJsObj.isSvgAnimate = true
    }
  }else if(cid == COMPONENT_TYPES.wb_slot_machine) {
    state.isLoadJsObj.isSlotMachine = true
  }else if(cid == COMPONENT_TYPES.wb_grasp_doll) {
    state.isLoadJsObj.isGsap = true
  }else if(cid == COMPONENT_TYPES.wb_audio) {
    state.isLoadJsObj.isAudio = true
  }else if(cid == COMPONENT_TYPES.wb_upload) {
    state.isLoadJsObj.isHtml2canvas = true
    state.isForm.isUpload[currentPage.id] = true
    state.isLoadJsObj.isNeedUploadParams = true
  }else if(cid == COMPONENT_TYPES.wb_paper) {
    state.isLoadJsObj.isPaper = true
  }else if(cid == COMPONENT_TYPES.wb_img) {
    if(componentData.commonAttr.isForm) {
      state.isForm.isImg[currentPage.id] = true
    }
  }

  if(!state.animates.isAnimate[currentPage.id] && (componentData.animate && componentData.animate.animates.length > 0 || cid == COMPONENT_TYPES.wb_carousel || cid == COMPONENT_TYPES.wb_flip_mc)){
    state.animates.isAnimate[currentPage.id] = true
  }
}

function dealGroupScrollTriggerAnimate(state, componentData){
  const scrollTriggerType = componentData.commonAttr.scrollTriggerType;
  if(componentData.commonAttr.isScrollTriggerGsap){
    if(scrollTriggerType == SCROLL_TRIGGER_TYPE_MAP.imgAndWordEase){
      let halfWidth = componentData.conAttr.width/2
      _.forEach(componentData.components, (compData) => {
        state.animates.scrollTriggerType[componentData.id] = scrollTriggerType;
        let scrollTriggerClasses = [];
        if(!compData.commonAttr.scrollTrigger){
          compData.commonAttr.scrollTrigger = {}
        }
        compData.commonAttr.scrollTrigger.scrollTriggerClasses = scrollTriggerClasses;
        scrollTriggerClasses.push('scroll-trigger-img-word-animate');
        const conAttr = compData.conAttr;
        if(conAttr.left + conAttr.width/2 < halfWidth){
          scrollTriggerClasses.push('scroll-trigger-img-word-animate-left');
        }else{
          scrollTriggerClasses.push('scroll-trigger-img-word-animate-right');
        }
      })
    }else if(scrollTriggerType == SCROLL_TRIGGER_TYPE_MAP.offsetGood && componentData.commonAttr.scrollTrigger.items){
      componentData.commonAttr.scrollTrigger.groupClassName = 'scroll-trigger-offset-con-' + _.random(0, 100);
      let compIds = JSON.parse(componentData.commonAttr.scrollTrigger.items);
      const rand = _.random(0, 1000);
      _.forEach(componentData.components, (compData, index) => {
        if(!compData.commonAttr.scrollTrigger){
          compData.commonAttr.scrollTrigger = {}
        }
        compIds[compData.id].className = 'scroll-trigger-offset-' + (rand + index);
        compData.commonAttr.scrollTrigger.scrollTriggerClasses = [compIds[compData.id].className];
      })
      //将字符串转为对对象赋值给items
      componentData.commonAttr.scrollTrigger.items = compIds;
    }else if(scrollTriggerType == SCROLL_TRIGGER_TYPE_MAP.multiBg){
      componentData.commonAttr.scrollTrigger.groupClassName = 'scroll-trigger-multi-con-' + _.random(0, 100);
    }else if(scrollTriggerType == SCROLL_TRIGGER_TYPE_MAP.compMoveToCenter){
      state.animates.scrollTriggerType[componentData.id] = scrollTriggerType;
      componentData.commonAttr.scrollTrigger.groupClassName = 'scroll-trigger-move-to-center-animate';
      componentData.commonAttr.scrollTrigger.scrollTriggerClasses = ['scroll-trigger-move-to-center-animate-left']
      let matchCompId = componentData.commonAttr.scrollTrigger.matchCompId;
      if(matchCompId){
        let matchComponentData = state.componentMap[getCompIdByParam(matchCompId)];
        if(matchComponentData){
          matchComponentData.commonAttr.scrollTrigger.groupClassName = 'scroll-trigger-move-to-center-animate';
          matchComponentData.commonAttr.scrollTrigger.scrollTriggerClasses = ['scroll-trigger-move-to-center-animate-right']
        }
      }
    }else if(scrollTriggerType == SCROLL_TRIGGER_TYPE_MAP.fixed){
      //scroll-trigger-fixed-line scroll-trigger-fixed-con
      const rand = _.random(0, 100);
      let scrollTrigger = componentData.commonAttr.scrollTrigger;
      scrollTrigger.groupClassName = 'scroll-trigger-fixed-con-animate-' + rand;
      scrollTrigger.lineClassName = 'scroll-trigger-fixed-line-' + rand;
      scrollTrigger.conClassName = 'scroll-trigger-fixed-con-' + rand;
      _.forEach(componentData.components, (compData) => {
        if(!compData.commonAttr.scrollTrigger){
          compData.commonAttr.scrollTrigger = {}
        }
        //将打组组件中的存储的className设置为它的孩子的类名
        if(compData.cid == COMPONENT_TYPES.wb_bg){
          compData.commonAttr.scrollTrigger.scrollTriggerClasses = [scrollTrigger.lineClassName];
          // compData.commonAttr.scrollTrigger.lineClassName = scrollTrigger.lineClassName;
        }else if(compData.cid == COMPONENT_TYPES.wb_img && compData.styles.opacity == 0){
          //撑开容器的图片
        }else{
          compData.commonAttr.scrollTrigger.scrollTriggerClasses = [scrollTrigger.conClassName];
          // compData.commonAttr.scrollTrigger.conClassName = scrollTrigger.conClassName;
        }
      })
    }
  }
}

function dealGroupAnimate(componentData){
  let groupClassName = "group-gsap-" + _.random(0,10);
  componentData.commonAttr.groupAnimateClass = groupClassName;
  _.forEach(componentData.components, (componentData_) => {
    componentData_.commonAttr.groupAnimateClass = groupClassName;
  })
}
function dealGlobalMenuFixed(componentData){
  _.forEach(componentData.components, (componentData_) => {
    if(componentData_.cid == COMPONENT_TYPES.wb_menu){
      componentData_.commonAttr.isPageFixed = true;
    }
  })
}

